<template>
  <footer class="main-footer" id="footerNav">
    <div class="footer-link-list">
      <a v-for="(menu,idx) in menuList" :href="menu.url" class="link-item ">
        <img :src="icon(idx)" class="footer-icon" :class="`${menu.name}-icon`">
        <div class="link-title" :class="activeClass(idx)">{{menu.title}}</div>
      </a>
    </div>
  </footer>
</template>

<script>
    import {menuList} from '@/js/index/menu'

    export default {
      props:["active","theme"],
      data(){
          return {
            menuList: [],
            menuIndex:0,
          }
        },
      mounted(){
        this.menuList = menuList();
      },
      methods:{
        activeClass(index){
          if(this.menuList[index].name==this.active){
            return "active";
          }else{
            return ""
          }
        },
        icon(index){
          this.menuIndex = index;
          let path = "/images/footer/";
          if(this.menuList[index].name==this.active){
            return path+this.menuList[index].icon+"-active.png";
          }else{
            return path+this.menuList[index].icon+".png";
          }
        }
      }
    }
</script>

<style  lang="scss"  scoped>
  .main-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFFFFF;
    z-index:2;
    font-family: SourceHanSansCN-Regular, SourceHanSansCN;
    box-shadow: 0 -0.02rem 0.06rem 0 rgba(0, 0, 0, 0.1);
    .footer-link-list {
      display: flex;
      height: .98rem;
      line-height: 1;
      text-align: center;
      font-size: .24rem;
      font-weight: 400;
      flex-direction: row;
      justify-content: space-between;
      a{
        text-decoration: none;
      }
      .link-item {
        flex:1;
        .link-title {
          color: #C4C8D5;
          margin-bottom: 0.14rem;
        }
        .active {
          color: #3C6EFF;
        }
        .footer-icon{
          margin-top: 0.14rem;
          margin-bottom: 0.1rem;
        }
        .index-icon{
          width: 0.41rem;
          height: 0.36rem;
        }
        .password-icon{
          width: 0.36rem;
          height: 0.36rem;
        }
        .statistics-icon{
          width: 0.36rem;
          height: 0.36rem;
        }
        .myInfo-icon{
          width: 0.36rem;
          height: 0.40rem;
        }
      }
    }

  }
</style>
